import { useHistory } from "react-router-dom";
import navsApi from "../../api/navs";
import { Card, Form, Breadcrumb, Space, Button, Input, message } from "antd";
//表格布局信息
const layout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
};
// 必填项提示信息
const validateMessages = {
  required: "必填项不能为空！",
  types: {
    number: "请输入有效的数字!",
  },
};
// eslint-disable-next-line
export default () => {
  let history = useHistory();
  //新增按钮点击事件
  const onFinish = async (values) => {
    const data = await navsApi.addNav(values);
    console.log(values);
    if (data._id) {
      message.success({
        content: "新增商品大类成功，即将跳转至商品大类列表",
        duration: 1,
        onClose: () => {
          history.push("/info/navs");
        },
      });
    } else {
      message.error({
        content: "新增商品大类失败，请重新添加",
        duration: 1,
      });
    }
  };
  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>商品分类</Breadcrumb.Item>
            <Breadcrumb.Item>商品大类</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/addNav">新增商品大类</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card style={{ height: "640px" }}>
          <Form
            {...layout}
            onFinish={onFinish}
            validateMessages={validateMessages}
            style={{ marginTop: "100px" }}
          >
            <Form.Item
              name="name"
              label="商品大类名称"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input
                placeholder="请输入商品大类名称"
                style={{ width: "300px" }}
              />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 10 }}>
              <Button type="primary" htmlType="submit">
                新增
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Space>
    </div>
  );
};
